<!-- 审核消息即系统消息 -->
<template>
  <div class="examineAndSysMsg">
    <div class="header" v-if="msgList.length!=0">
      <div style="color: gray;">共{{msgList.length}}条消息</div>
      <el-popconfirm title="确定删除所有已读内容吗？" @confirm="$emit('clearMsg',0)">
        <div style="cursor: pointer;color: rgb(73, 177, 245) !important;" slot="reference">
          <i class="el-icon-delete"></i>
          清空所有消息
        </div>
      </el-popconfirm>

    </div>
    <el-collapse v-if="msgList.length!=0" v-model="activeName" accordion @change="changeCollapse">
      <el-collapse-item v-for="(item,index) in msgList" :key="index" :name="index">
        <template slot="title">
          {{item.activatTitle}}
          {{item.isRead == 0 ? '(未读)' : '(已读)'}}
          <i class="header-icon el-icon-info" style="color: red;" title="该文章审核未通过~"></i>
        </template>
        <div>
          <span style="font-weight: 700;">文章链接：</span>
          <a :href="`${url}${item.activatLink}`">{{url}}{{item.activatLink}}</a>
        </div>
        <div>
          <span style="font-weight: 700;">审核详情：</span>
          <span v-html="item.noexamine"></span>
        </div>
        <div>
          <span style="font-weight: 700;">审核时间：</span>{{item.createTime}}
        </div>
        <div class="del">
          <i class="el-icon-delete" @click="$emit('delMsg',item.msgId,0)"></i>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="empty" v-if="msgList.length == 0">
      <img src="https://image.kuailemao.xyz/blog/loading/loading-gif.gif" alt="">
      <div>暂时没有消息哦~</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'examineMsg',
    props: ["msgList"],
    data() {
      return {
        activeName: "",
        url: process.env.VUE_APP_ARTICLE_PATH
      };
    },

    mounted() {

    },

    methods: {
      // 展开手风琴
      changeCollapse(e) {
        if (e != undefined && this.msgList[e] != undefined) {
          // 修改已读状态
          if (this.msgList[e].isRead != 1) {
            this.msgList[e].isRead = 1
            // 交于异步修改
            this.$emit("readMsg", this.msgList[e].msgId);
          }
        }
      }

    },
  };
</script>
<style scoped lang="less">
  .examineAndSysMsg {
    padding: 0 10px;
    /* display: flex; */
    flex-direction: column;

    .header {
      display: flex;
      margin: 10px 0;
      justify-content: space-between;
    }

  }

  /deep/ .el-collapse-item__content {
    position: relative;
  }

  .del {
    position: absolute;
    right: 0;
    cursor: pointer;
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    /* 可以根据需要调整高度 */
  }

  .empty img {
    margin-bottom: 10px;
    /* 图片与文本之间的间距 */
  }

  /deep/ .inspectColor {
    color: red !important;
  }
</style>